<template>
	<view class='bench' :style='{ "padding-top":headerHeight+"px" }'>
		<view class="pageHead dFlex jBetween_aCenter" :style="{'padding-top':headerTop+'px'}">
			<!-- <u-icon name="arrow-left" color='#ffffff'></u-icon> -->
			<view class="pageTit">工作台</view>
			<!-- <u-icon name="arrow-left" color='#ffffff'></u-icon> -->
		</view> 
		<view class='container' :style='{"height":showHeight+"px"}'>
			<view class="tongji dFlex jAround_aStart">
				<view class="tjOne">
					<view class="tjTit">报价中行程 (个)</view>
					<view class="tjVal">{{count1?count1:'0'}}</view>
				</view>
				<!-- 车主 -->
				<view class="tjOne" v-if='identify == "2"'>
					<view class="tjTit">运输中行程 (个)</view>
					<view class="tjVal">{{count2?count2:0}}</view>
				</view>
				<!-- 货主 -->
				<view class="tjOne" v-if='identify == "1"'>
					<view class="tjTit">运输中行程 (个)</view>
					<view class="tjVal">{{count2?count2:0}}</view>
				</view>
			</view>
			<!-- @click -->
			<u-tabs :itemStyle="{
				'position':'relative',
				'height':'44px'
			}" :list="menus" :current='currentMenu' :scrollable='false' @click="changeStatus"></u-tabs>
			<view class="list">
				<view class="orderOne" v-for="(item,index) in list" :key='index' @click="lookTrip(item)">
					<view class='product dFlex jBetween_aCenter'>
						<text>{{item.name}}</text>
						<view class="orderStatus imgPublic">
							<image v-if='item.status == "1"' src="../static/images/bjz.png" mode="widthFix"></image>
							<image v-if='item.status == "2"' src="../static/images/ybj.png" mode="widthFix"></image>
							<image v-if='item.status == "3" && identify == "1"' src="../static/images/ysz.png" mode="widthFix"></image>
							<image v-if='item.status == "3" && identify == "2"' src="../static/images/dzf.png" mode="widthFix"></image>
							<image v-if='item.status == "4" && identify == "1"' src="../static/images/ywc.png" mode="widthFix"></image>
							<image v-if='item.status == "4" && identify == "2"' src="../static/images/ysz.png" mode="widthFix"></image>
							<image v-if='item.status == "5" && identify == "1"' src="../static/images/yqx.png" mode="widthFix"></image>
							<image v-if='item.status == "5" && identify == "2"' src="../static/images/ywc.png" mode="widthFix"></image>
						</view>
						<!-- orange blue-->
						<view :class="['carType','dFlex','jCenter_aCenter','orange']">{{item.car_type?item.car_type:'-'}}</view>
					</view>
					<view class="config">
						<view class="time dFlex jStart_aCenter">
							<u-icon name="clock-fill" color='#999999'></u-icon>
							<view class="showTime">{{item.load_time}}~{{item.unload_time}}</view>
						</view>
						<view class="address dFlex jStart_aCenter qi">
							<view class="addIcon blue">起</view>
							<view class="addInfo">{{item.load_province1 + item.load_city1 + item.load_address1}}</view>
						</view>
						<view class="address dFlex jStart_aCenter">
							<view class="addIcon orange">终</view>
							<view class="addInfo">{{item.unload_province1 + item.unload_city1 + item.unload_address1}}</view>
						</view>
					</view>
					<view class="info">
						<view class="line1 dFlex jBetween_aCenter">
							<text>货物重量</text>
							<view class="val">{{item.ton}}吨</view>
						</view>
						<view class="line1 dFlex jBetween_aCenter">
							<text>货主报价</text>
							<view class="val">{{item.ton_price}}/吨</view>
						</view>
						<view class="line1 dFlex jBetween_aCenter">
							<text>承运情况</text>
							<view class="val">
								<text>{{item.chengyun}}</text>
							</view>
						</view>
						<view class="line1 dFlex jBetween_aCenter">
							<text>信息费</text>
							<view class="val">
								<text>￥{{item.info_money}}</text>
							</view>
						</view>
						<view class="price" v-if='identify =="2" && item.status=="2"'>我的报价￥{{item.ship_offer.ton_price}}/吨 承运{{item.ton}}吨 等待货主确认</view>

						<!-- 车主 -->
						<view class="btns" v-if='identify =="2"'>
							<!-- 未报价 -->
							<view class="price" v-if='item.status == "1"'>已有<text style="color:red;">{{item.offer_count?item.offer_count:0}}</text>人报价 最低报价：￥{{item.min_price?item.min_price:'0.00'}}/吨</view>
							<!-- 报价完成 -->
							
							<view v-if='item.status > "2"'></view>
							
							<view v-if='item.status > "2"'></view>
							<view class="btnBox dFlex jEnd_aCenter">
								<!-- 未报价 -->
								<view class="btn btnBlue" v-if='item.status == "1"' @click.stop="goOffer(item)">我要报价</view>
								<!-- 已报价、待支付 -->
								<view class="btn btnBlue" v-if='item.status == "3"' @click.stop="payOffer(item,index)">支付信息费</view>
								<view class="btn btnHui" v-if='item.status == "2" || item.status == "3"' @click.stop='cancelOrder(item,index)'>取消报价</view>
								<!-- 已报价 -->
								<!-- <view class="btn" v-if="item.status == '2'">修改报价</view> -->
								<!-- 运输中、已完成-->
								<view class="btn" v-if='item.status == "4" || item.status == "5"' @click.stop='contact(item.tel)'>联系货主</view>
								<!-- 运输中 -->
								<!-- <view class="btn" v-if='item.status == "4"' @click.stop='confirm(item)'>确认送达</view> -->
							</view>
						</view>
						<!-- 货主 -->
						<view class="btns" v-if='identify =="1"'>
							<view class="price" v-if='item.status == "1"'>已有<text style="color:red;">{{item.ship_offer}}</text>人报价 最低报价：￥{{item.min_price?item.min_price:'0.00'}}/吨</view>
							<view class="infoPrice" >信息费: <text>￥{{item.info_money}}</text></view>
							<view class="btnBox dFlex jEnd_aCenter">
								
								<!-- 报价中 --> 
								<view class="btn btnHui" v-if='item.status == "1"' @click.stop="cancelOrder(item,index)">取消订单</view>
								<!-- <view class="btn" v-if='item.status == "5"' @click.stop='republish(item)'>重新发布</view> -->
								<view class="btn" v-if='item.status == "1"' @click.stop='lookRecord(item)'>报价记录</view>
								<!-- 运输中-->
								<view class="btn" v-if='item.status == "3"' @click.stop='contact(item.tel)'>联系车主</view>
								<view class="btn" v-if='item.status == "3"' @click.stop='confirm(item)'>确认送达</view>
								<!-- 已过期 -->
								<view class="btn" v-if='item.status == "5"' @click.stop='republish(item)'>再次发布</view>
								<view class="btn btnHui" style="color: red;border: 1px solid red;" v-if='identify =="1" && (item.status == "4" || item.status == "5")' @click.stop="delOrder(item,index)">删除订单</view>
							</view>
						</view>
					</view>
				</view>
				<u-empty v-if='!list.length' mode="data" text='暂无数据' :marginTop='30'> </u-empty>
			</view>
		</view>
		<!-- 返回顶部 -->
		<u-back-top :scroll-top="scrollTop" top="600" icon="arrow-up"></u-back-top>
		<!-- 发布 -->
		<view class="fabu dFlex jCenter_aCenter flexDirection" @click="release" v-if="identify == '1'">
			<u-icon name="file-text" size='20px' labelSize='14px' color='#0087FC' label='发布' labelPos='bottom' labelColor='#0087FC'></u-icon>
		</view>
	</view>
</template>

<script>
	import {
		shipList,
		weiLogin,
		indexOperate,
		
		shipList2,
		offerPay,
		carList,
		canseloffer,
	} from '@/tool/http.js';
	export default {
		data() {
			return {
				headerTop: getApp().globalData.header_top,
				headerHeight: '',
				showHeight: "",
				uid:'',
				// 车主
				menus:[],
				currentMenu: 0,
				status:'1',
				scrollTop:0,
				
				identify:0,
				list:[],
				count:0,
				count1:0,
				count2:0,
				page:1,
				haveMore:false,
				pullDownStatus:false,
			};
		},
		onShow() {
			this.uid = uni.getStorageSync('uid')?uni.getStorageSync('uid'):'';
			this.identify = getApp().globalData.identify;
			if(this.identify == "1"){
				this.menus = [{name: '报价中',status:'1',badge:{value:0}}, {name: '运输中',status:'3',badge:{value:0}},{name: '已完成',status:'4'}];
			}else{
				this.menus = [{name: '报价中',status:'1',badge:{value:0}}, {name: '已报价',status:'2',badge:{value:0}}, {name: '待支付',status:'3',badge:{value:0}}, {name: '运输中',status:'4',badge:{value:0}},{name: '已完成',status:'5'}];
			}
			uni.createSelectorQuery().select('.pageHead').boundingClientRect(data => {
				this.headerHeight = data.height;
				this.showHeight = uni.getSystemInfoSync().windowHeight - data.height;
			}).exec()
			if(typeof(uni.getStorageSync('currentStatus')) == 'number' && uni.getStorageSync('currentStatus') >= 0){
				this.currentMenu = this.menus.findIndex(item=>item.status == uni.getStorageSync('currentStatus'));
				uni.removeStorageSync('currentStatus')
			}
			this.getList(1);
		},
		onReachBottom() {
			if(this.haveMore){
				this.haveMore = false;
				this.getList(this.page ++);
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onPullDownRefresh() {
			this.pullDownStatus = true;
			this.getList(1);
		},
		methods:{
			changeStatus(item){
				this.currentMenu = item.index;
				this.status = item.status;
				this.getList(1);
			},
			contact(tel){
				uni.makePhoneCall({
					phoneNumber:tel,
				})
			},
			confirm(line){
				uni.showModal({
					title:'确认货物送达且没有问题?',
					success: async(op) => {
						if(op.confirm){
							let res = await indexOperate({
								type:'2',
								id:line.id,
							})
							if(res){
								uni.showToast({
									title:'信息已更新',
									icon:"success"
								})
								this.getList(1);
							}
						}
					}
				})
			},
			republish(line){
				uni.navigateTo({
					url:'/bench/release?time=second&id='+line.id
				})
			},
			cancelOrder(line,index){
				var tips = this.identify == '1' ? "确定取消该货运信息？" : "确定取消该货运报价？"
				uni.showModal({
					title:tips,
					success: async(op) => {
						if(op.confirm){
							var res = null;
							if(this.identify == "1"){
								res = await indexOperate({
									type:'1',
									id:line.id,
								});
							}else{
								res = await canseloffer({
									memberId:uni.getStorageSync('uid'),
									// memberId:'112',
									shipId:line.id,
								});
							}
							if(res){
								uni.showToast({
									title:'信息已取消',
									icon:"success"
								})
								this.list.splice(index,1);
							}
						}
					}
				})
			},
			delOrder(line,index){
				var tips = "确定删除该货运信息？" 
				uni.showModal({
					title:tips,
					success: async(op) => {
						if(op.confirm){
							var res = null;
							if(this.identify == "1"){
								res = await indexOperate({
									type:'4',
									id:line.id,
								});
							}
							if(res){
								uni.showToast({
									title:'删除成功',
									icon:"success"
								})
								this.list.splice(index,1);
							}
						}
					}
				})
			},
			async getList(page){
				this.page = page ? page : this.page;
				var res = null;
				if(this.identify == '1'){
					res = await shipList({
						memberId: this.uid,
						page:this.page,
						status:this.menus[this.currentMenu].status,
					});
				}else{
					res = await shipList2({
						memberId: this.uid,
						// memberId:112,
						page:this.page,
						status:this.menus[this.currentMenu].status,
					});
				}
				if(this.pullDownStatus){
					this.pullDownStatus = false;
					uni.stopPullDownRefresh();
				}
				if(res){
					this.menus.forEach(item=>{
						if(item.name == "报价中"){
							item.badge.value = res.counts1 ? res.counts1 : 0;
						}else if(item.name == "已报价"){
							item.badge.value = res.counts2 ? res.counts2 : 0;
						}else if(item.name == "待支付"){
							item.badge.value = res.counts3 ? res.counts3 : 0;
						}else if(item.name == "运输中"){
							item.badge.value = res.counts4 ? res.counts4 : 0;
						}
					})
					this.count = res.count;
					this.count1 = res.count1;
					this.count2 = res.count2;
					this.list = this.page == 1 ? res.list : this.list.concat(res.list);
					this.haveMore = res.list.length >= 10 ? true : false;
					if(res.need_pay>0){
						uni.showModal({
							title:'报价通知',
							content:'有'+res.need_pay+'位货主已同意你的报价，请尽快支付信息费，并与货主联系',
							success: (op) => {

							}
						})
					}
					
				}
				console.log(res);
			},
			// 发布行程
			release(){
				if(uni.getStorageSync('uid')){
					uni.navigateTo({
						url:'/bench/release'
					})
				}else{
					uni.showModal({
						title:'提示',
						content:'登录后可发布货运信息，是否现在登录？',
						success: (op) => {
							if(op.confirm){
								uni.login({
									success:async(info)=>{
										if(info.code){
											let res = await weiLogin({
												js_code:info.code,
											});
											if(res){
												uni.showToast({
													title:'登录成功',
													icon:'success'
												})
												uni.setStorageSync('uid',res.memberId);
												this.getList(1);
											}
										}
									},
									fail:(err)=>{
										console.log(err);
										uni.showToast({
											title:'登录凭证获取失败',
											icon:"none"
										})
									}
								})
							}
						}
					})
				}
			},
			// 查看报价记录
			lookRecord(line){
				uni.navigateTo({
					url:'/bench/record?id='+line.id
				})
			},
			// 支付信息费
			payOffer(item,index){
				uni.showModal({
					title:'确定运输该订单？',
					success: async(op) => {
						if(op.confirm){
							let res = await offerPay({
								id:item.ship_offer.id,
							});
							console.log('支付信息',res);
							if(res){
								uni.requestPayment({
									provider:'wxpay',
									timeStamp:res.timeStamp,
									nonceStr:res.nonceStr,
									package:res.package,
									signType:res.signType,
									paySign:res.paySign,
									success: () => {
										uni.showToast({
											title:'支付成功',
											icon:"success"
										})
										this.list.splice(index,1);
									},
									fail:(err)=>{
										console.log(err);
										uni.showToast({
											title:'订单支付失败',
											icon:"none"
										})
									},
									complete: () => {
										
									}
								})
							}
						}
					}
				})
			},
			// 报价
			async goOffer(line){
				if(uni.getStorageSync('uid')){
					let res = await carList({
						memberId:uni.getStorageSync('uid'),
					});
					console.log(res);
					if(res){
						if(!res.list.length){
							uni.showModal({
								title:'添加运输车辆后可报价，是否现在去添加？',
								success: (op) => {
									if(op.confirm){
										uni.navigateTo({
											url:'/person/team',
										})
									}
								}
							})
						}else{
							uni.navigateTo({
								url:'/bench/offer?id='+line.id+'&ton='+line.ton,
							})
						}
					}
					/*  */
				}else{
					uni.showModal({
						title:'提示',
						content:'登录后可提交报价，是否现在登录？',
						success: (op) => {
							if(op.confirm){
								uni.login({
									success:async(info)=>{
										if(info.code){
											let res = await weiLogin({
												js_code:info.code,
											});
											if(res){
												uni.showToast({
													title:'登录成功',
													icon:'success'
												})
												uni.setStorageSync('uid',res.memberId);
												this.getList(1);
											}
										}
									},
									fail:(err)=>{
										console.log(err);
										uni.showToast({
											title:'登录凭证获取失败',
											icon:"none"
										})
									}
								})
							}
						}
					})
				}
				
			},
			// 行程详情
			lookTrip(line){
				uni.navigateTo({
					url:'/bench/tripDetail?id='+line.id,
				})
			}
		}
	}
</script>

<style lang="scss">
/* 	/deep/.u-badge{
		position: absolute;
		top:5px;
		right:0px;
	} */
	.container {
		.list {
			.orderOne {
				.info {
					.btns {
						.btnBox {
							.btn {
								color: #0087FC;
								border: 1px solid #0087FC;
								padding: 4px 8px;
								border-radius: 50px;
								margin-left: 12px;
							}
							.btnBlue{
								background: #0087FC;
								color: white;
							}
							.btnHui {
								border-color: #CCCCCC;
								color: #CCCCCC;
							}
						}

						.infoPrice {
							font-size: 12px;
							color: #666666;

							text {
								font-size: 14px;
								color: #0087FC;
								font-weight: bold;
							}
						}
					}

					.price {
						margin-bottom: 8px;
						padding: 8px 12px;
						background: #F8F8F8;
						color: #333333;
						text-align: left;
						border-radius: 4px;
					}

					.line1 {
						width: 100%;
						margin-bottom: 8px;
						color: #666666;

						.val {
							color: #222222;
						}
					}

					width: 100%;
					padding: 10px 0;
				}

				.config {
					.address {
						.addIcon {
							width: 14.8px;
							height: 14.8px;
							border-radius: 50%;
							color: white;
							text-align: center;
							line-height: 14.8px;
							font-size: 8px;
							margin-right: 8px;
						}

						.blue {
							background: #0087FC;
						}

						.orange {
							background: #ff4816;
						}

						width: 100%;
						color: #000033;
					}

					.qi {
						margin: 8px 0;
					}

					.time {
						font-size: 12px;
						color: #999999;

						.showTime {
							margin-left: 8px;
						}
					}

					width: 100%;
					padding: 10px 0;
					border-bottom: 1px solid #EEEEEE;
				}

				.product {
					.orange {
						background: linear-gradient(to right, #ff4816, #ffa15d);
					}

					.blue {
						background: #0087FC;
					}

					.carType {
						width: 52px;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: -12px;
						font-size: 10px;
						color: white;
						padding: 4px 0;
						border-top-right-radius: 50px;
						border-bottom-right-radius: 50px;
						text-align: center;
					}

					.orderStatus {
						width: 50px;
					}

					width:100%;
					border-bottom: 1px solid #EEEEEE;
					padding: 10px 0 10px 50px;
					box-sizing: border-box;
					position: relative;
					font-size: 18px;
					font-weight: bold;
				}

				width:100%;
				padding: 0 12px;
				box-sizing: border-box;
				border-radius: 5px;
				margin-bottom: 12px;
				background: white;
			}

			width:100%;
			padding:12px;
			box-sizing: border-box;
		}

		.tongji {
			.tjOne {
				.tjVal {
					font-size: 24px;
					margin-top: 8px;
				}

				flex:1;
				text-align: left;
				font-size: 12px;
			}

			width: 100%;
			padding:12px;
			box-sizing: border-box;
			color:white;
			background: linear-gradient(to right, #00A3F5, #0087FC);
		}

		width: 100%;
	}
	.fabu{
		width: 44px;
		height: 44px;
		border-radius: 50%;
		box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
		background: white;
		padding: 4px;
		position: fixed;
		right: 20px;
		bottom: calc(14px * 11);
	}
	.pageHead {
		background: linear-gradient(to right, #00A3F5, #0087FC);
		color: white;
		position: fixed;
		top: 0;
		z-index: 2;
	}

	.bench {
		height: 100%;
		box-sizing: border-box;
	}
</style>